import React from 'react';
import { Page } from '../types';
import { BrainCircuitIcon, CheckCircleIcon, TestTubeIcon, UserCheckIcon, DatabaseIcon, CpuIcon } from './icons';

interface SidebarProps {
  currentPage: Page;
  setCurrentPage: (page: Page) => void;
  isGpuBusy: boolean;
}

interface NavItemProps {
  icon: React.ReactNode;
  label: Page;
  isActive: boolean;
  onClick: () => void;
  disabled: boolean;
}

const NavItem = ({
  icon,
  label,
  isActive,
  onClick,
  disabled,
}: NavItemProps) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className={`w-full flex items-center px-4 py-3 text-sm font-medium transition-colors duration-200
                ${isActive
                  ? 'bg-cyan-900/50 text-cyan-300 border-r-4 border-cyan-400'
                  : 'text-green-300 hover:bg-green-900/50 hover:text-green-100'}
                ${disabled && !isActive ? 'text-gray-600 bg-transparent cursor-not-allowed' : ''}
              `}
  >
    {icon}
    <span className="ml-4">{label}</span>
  </button>
);

const pageIcons: Record<Page, React.ReactNode> = {
  [Page.Train]: <BrainCircuitIcon className="w-5 h-5" />,
  [Page.Validate]: <CheckCircleIcon className="w-5 h-5" />,
  [Page.Test]: <TestTubeIcon className="w-5 h-5" />,
  [Page.UserTest]: <UserCheckIcon className="w-5 h-5" />,
  [Page.GenerateJson]: <DatabaseIcon className="w-5 h-5" />,
};

const Sidebar = ({ currentPage, setCurrentPage, isGpuBusy }: SidebarProps) => {
  const navItems = Object.values(Page);
  const mainNavItems = navItems.slice(0, 3);
  const secondaryNavItems = navItems.slice(3);

  return (
    <div className="w-64 bg-black/50 border-r-2 border-green-900/50 flex flex-col h-full">
      <div className="p-4 border-b-2 border-green-900/50">
        <h1 className="text-2xl font-bold text-center text-green-400 glow">ResNeXt</h1>
        <p className="text-xs text-center text-green-600">训练监控平台</p>
      </div>
      <nav className="flex-grow mt-4">
        {mainNavItems.map((page) => (
          <NavItem
            key={page}
            icon={pageIcons[page]}
            label={page}
            isActive={currentPage === page}
            onClick={() => setCurrentPage(page)}
            disabled={isGpuBusy}
          />
        ))}
        <hr className="border-green-800/50 my-4 mx-4" />
        {secondaryNavItems.map((page) => (
          <NavItem
            key={page}
            icon={pageIcons[page]}
            label={page}
            isActive={currentPage === page}
            onClick={() => setCurrentPage(page)}
            disabled={isGpuBusy && [Page.UserTest, Page.GenerateJson].includes(page)} // Only disable some secondary tasks
          />
        ))}
      </nav>
      <div className="p-4 border-t-2 border-green-900/50 text-green-500 text-xs">
          <div className="flex items-center gap-2">
            <CpuIcon className="w-5 h-5 text-cyan-400"/>
            <div>
                <div>设备: <span className="text-cyan-300">NVIDIA CUDA (1x GPU)</span></div>
                <div>状态: <span className={isGpuBusy ? "text-red-400 animate-pulse" : "text-cyan-300"}>{isGpuBusy ? '运行中' : '空闲'}</span></div>
            </div>
          </div>
      </div>
    </div>
  );
};

export default Sidebar;